<template>
  <div class="contentBox cate">
    <div class="container">
      <div class="title">
        <h2 class="f28 textBold">产业服务</h2>
      </div>
      <div class="content mbt50 pbt30">
        <div class="product" v-for="(item,index) in list" :key="index" @click="toCateDetails(item.id,item.cate_name)">
          <div class="pic-box">
            <img :src="item.pic || noPic" alt="" class="transition objectCover">
          </div>
          <h3 class="transition f18 name">{{ item.cate_name }}</h3>
        </div>
        <nodata message="暂无分类" :status="listStatus"></nodata>
      </div>
      <m-pagination :pagination="total" :page-size="limit" @changePage='changeThisPage'/>
    </div>
  </div>
</template>

<script>
import { getProductsCategory } from '@/request/api'

export default {
  name: 'ServiceCategory',
  data() {
    return {
      list: [],
      page: 1,
      listStatus: 1,
      total: 1,
      limit: 16,
      noPic: require('assets/images/nopic.jpg')
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listStatus = 1
      this.list = []
      let data = {
        is_entity: '0',
        page: this.page,
        limit: this.limit,
        pid: 0,
        num: 10,
        mer_id : 0
      }
      getProductsCategory(data).then(res => {
        this.list = res.data.data
        this.total = res.data.total
        if (this.total === 0) {
          this.listStatus = 0
        } else {
          this.listStatus = 2
        }
        window.scrollTo({ top: 0 })
      })
    },
    changeThisPage(page) {
      this.page = page
      this.getList()
    },
    toCateDetails(id, name) {
      const url = this.$router.resolve({
        path: '/industryService/service/classify/' + id + '?name=' + name,
      })
      window.open(url.href, '_blank')
    }
  }
}
</script>

<style scoped>
.cate {
  background: #F3F3F7;
}

.title {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  color: rgb(227, 139, 44);
  position: relative;

}

.title::before, .title::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 40%;
  height: 1px;
  width: 25%;
  background: #E38B2C;
}

.title h2::before, .title h2::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 60%;
  height: 1px;
  width: 15%;
  background: #E38B2C;
}

.title::before {
  margin-left: -100px;
  transform: translateX(-100%);
}

.title::after {
  margin-left: 100px;
}

.title h2::before {
  margin-left: -110px;
  transform: translateX(-100%);
}

.title h2::after {
  margin-left: 110px;
}

.content {
  display: flex;
  flex-wrap: wrap;
}

.content .product {
  width: 25%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-top: 68px;
  cursor: pointer;
  padding: 0 20px;
}

.content .product .pic-box {
  width: 100%;
  height: 275px;
  overflow: hidden;
}

.content .product .name {
  position: relative;
  margin-top: 10px;
}

.content .product .name::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -17px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 3px;
  background: rgb(227, 139, 43);
  border-radius: 1px;
}

.content .product:hover img {
  transform: scale(1.1);
}

.content .product:hover .name {
  color: #E38B2E;
}

</style>
